<template>
  <view class="favorites-page">
    <view class="page-header">
      <view class="back-btn" @click="goBack">←</view>
      <text class="page-title">我的收藏</text>
      <text class="clear-btn" @click="clearFavorites">清空</text>
    </view>
    
    <view class="filter-tabs">
      <view 
        v-for="(tab, index) in filterTabs" 
        :key="index"
        class="filter-tab"
        :class="{ active: activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <view class="favorites-content" v-if="filteredFavorites.length > 0">
      <view class="favorites-list">
        <favorite-item 
          v-for="item in filteredFavorites" 
          :key="item.id"
          :item="item"
          @remove="removeFavorite"
        />
      </view>
    </view>
    
    <view class="empty-favorites" v-else>
      <text class="empty-icon">❤️</text>
      <text class="empty-text">暂无收藏内容</text>
      <view class="go-browse" @click="goBrowse">去看看</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
// 修正组件路径 - 根据实际项目结构调整
import FavoriteItem from '@/components/FavoriteItem.vue'

const activeTab = ref(0)

const filterTabs = [
  { name: '全部', type: 'all' },
  { name: '课程', type: 'course' },
  { name: '视频', type: 'video' },
  { name: '商品', type: 'product' }
]

// 假数据
const favorites = ref([
  {
    id: 1,
    type: 'course',
    title: 'Vue3 + TypeScript 实战课程',
    image: 'https://via.placeholder.com/200x150/ff6b35/ffffff?text=Vue3',
    instructor: '张老师',
    price: 299,
    addTime: '2024-01-15'
  },
  {
    id: 2,
    type: 'video',
    title: 'UI设计趋势分析',
    image: 'https://via.placeholder.com/200x150/ff6b35/ffffff?text=UI设计',
    author: '设计师小李',
    likes: 2156,
    addTime: '2024-01-12'
  },
  {
    id: 3,
    type: 'product',
    title: '北欧风格台灯',
    image: 'https://via.placeholder.com/200x150/ff6b35/ffffff?text=台灯',
    price: 299,
    sales: 234,
    addTime: '2024-01-10'
  }
])

const filteredFavorites = computed(() => {
  const tab = filterTabs[activeTab.value]
  if (tab.type === 'all') {
    return favorites.value
  }
  return favorites.value.filter(item => item.type === tab.type)
})

const goBack = () => {
  uni.navigateBack()
}

const clearFavorites = () => {
  uni.showModal({
    title: '确认清空',
    content: '确定要清空所有收藏吗？',
    success: (res) => {
      if (res.confirm) {
        favorites.value = []
        uni.showToast({ title: '已清空收藏', icon: 'success' })
      }
    }
  })
}

const removeFavorite = (itemId) => {
  const index = favorites.value.findIndex(item => item.id === itemId)
  if (index > -1) {
    favorites.value.splice(index, 1)
    uni.showToast({ title: '取消收藏', icon: 'success' })
  }
}

const goBrowse = () => {
  // 实际应用中应该导航到首页或推荐页面
  uni.switchTab({
    url: '/pages/CoursePage'
  })
}
</script>

<style scoped>
.favorites-page {
  background: #f5f5f5;
  min-height: 100vh;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60rpx 30rpx 30rpx;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.back-btn {
  font-size: 32rpx;
  color: #333;
  padding: 10rpx;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.clear-btn {
  font-size: 26rpx;
  color: #ff6b35;
}
.filter-tabs {
  display: flex;
  background: #fff;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}
.filter-tab {
  flex: 1;
  text-align: center;
  padding: 25rpx 0;
  font-size: 28rpx;
  color: #666;
  border-bottom: 3px solid transparent;
}
.filter-tab.active {
  color: #ff6b35;
  border-bottom-color: #ff6b35;
  font-weight: bold;
}
.favorites-list {
  padding: 0 20rpx;
}
.empty-favorites {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 50rpx;
}
.empty-icon {
  font-size: 120rpx;
  margin-bottom: 40rpx;
  opacity: 0.5;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 60rpx;
}
.go-browse {
  padding: 20rpx 60rpx;
  background-color: #ff6b35;
  color: #fff;
  border-radius: 60rpx;
  font-size: 28rpx;
}
</style>
